<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0"/>
    <title>Karaoke @ Home v3.1415</title>
    <style type="text/css">
      body {
        background: #000 url('background.jpg') no-repeat fixed center center;
        background-size: cover;
      }

      #menu {
        position: absolute;
        left: 0px;
      }

      #menu button {
        width: 130px;
        height: 60px;
        margin: 2px;
        font-size: 100%;
      }

      #scrollable {
        position: absolute;
        left: 150px;
        z-index: 1;
      }

      .singers a, .songs a {
        color: #00f;
        font-size: 1.2em;
        line-height: 200%;
        padding: 0 10px 0 10px;
        text-decoration: none;
        white-space: nowrap;
      }

      h2#singer_name {
        text-decoration: underline;
      }

      #playlist {
        border-collapse: collapse;
        width: 100%;
      }
      #playlist td { padding: 15px 0px 15px 0px}
      #playlist tr.even {
        background-color: #000;
        color: #fff;
        opacity: .5;
      }
      #playlist td.number { width: 5em; text-align: center }
      #playlist td.singer { width: 10em; text-align: center }
      #playlist td.promote { width: 4em }
      #playlist td.delete { width: 4em }
      #playlist a { color: #0ff; text-decoration: none; opacity: 1.0; }
    </style>
    <script type="text/javascript" src="iscroll.js"></script>
    <script type="text/javascript" src="WKShake.js"></script>
    <script type="text/javascript">
      var myScroll;
      var currentView = '';
      var resetScroll = false;

      function updateScrollableSize() {
          var scrollable = document.getElementById('scrollable');
          scrollable.style.height =
            (window.innerHeight - scrollable.offsetTop) + 'px';
          scrollable.style.width =
            (window.innerWidth - scrollable.offsetLeft) + 'px';
          myScroll.refresh();
      }

      function loaded() {
          myScroll = new iScroll('scrollable');
          updateScrollableSize();
      }

      function get(path, update) {
	  req = new XMLHttpRequest();
	  if (update) {
              if (currentView != path) {
                  resetScroll = true;
              }
              currentView = path;
	      req.onreadystatechange = function() {
		  if (req.readyState == 4 && req.status == 200) {
                       var content = document.getElementById('content');
                       if (content.innerHTML != req.responseText) {
                           content.innerHTML = req.responseText;
                           if (resetScroll) {
                               myScroll.scrollTo(0, 0, 0);
                               resetScroll = false;
                           }
                           myScroll.refresh();
                       }
		  }
	      }
	  }
	  req.open("GET", path, true);
	  req.send();
      }

      function getSingers(singer_type) {
	  get('singer?singer_type=' + singer_type, true);
      }

      function getSongs(singer_type, singer) {
	  get('song?singer_type=' + singer_type + '&singer=' + singer, true);
      }

      function getPlayList() {
	  get('playlist', true);
          setTimeout('updatePlayList()', 1000);
      }

      function updatePlayList() {
        if (currentView == 'playlist') {
          getPlayList();
        }
      }

      function addSong(singer_type, singer, song) {
	  get('add?singer_type=' + singer_type + '&singer=' + singer +
	      '&song=' + song, false);
	  alert('新增 ' + singer + ' ' + song + ' 到點歌單');
      }

      function randomAdd() {
          if (confirm("你確定要亂點一通嗎？ @@;")) {
            get('random_add', false);
          }
      }

      function promoteSong(number) {
	  get('promote?number=' + number, false);
      }

      function deleteSong(number) {
	  get('delete?number=' + number, false);
      }

      function drink() {
	  alert("自己去冰箱拿啦~ 乖喔! ^^");
      }

      window.onresize = updateScrollableSize;
      window.onload = function() {
        var myShakeEvent = new WKShake();
        myShakeEvent.start();
        myShakeEvent.shakeEventDidOccur = function() {
          if (currentView == 'playlist' && confirm("你確定要打亂點歌清單嗎?")) {
            get('shuffle', false);
          }
        }
      }
      document.addEventListener('DOMContentLoaded', loaded, false);
    </script>
  </head>
  <body>
    <div id="menu">
      <button onclick="getSingers('男歌手')">男歌手</button><br>
      <button onclick="getSingers('女歌手')">女歌手</button><br>
      <button onclick="getSingers('團體組合')">團體組合</button><br>
      <hr>
      <button onclick="randomAdd()">隨機點歌</button><br>
      <hr>
      <button onclick="get('next')">切歌</button><br>
      <button onclick="get('toggle_audio')">原唱/伴唱</button><br>
      <button onclick="getPlayList()">已點歌曲</button><br>
      <button onclick="drink()">酒水</button><br>
    </div>
    <div id="scrollable">
      <div id="content">
	<br>
	&lt;= 請用左手邊的功能表來選歌
      </div>
    </div>
  </body>
</html>
